<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background:pink;
            position:absolute;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        // 要求：鼠标在元素内部摁下后，随着鼠标拖拽移动，鼠标抬起后，不再移动
        // 获取元素
        var box=document.querySelector('.box');
        // 给元素绑定鼠标按下事件
        box.onmousedown = function () {
            console.log(1);
            // 按下之后再window中移动
            window.onmousemove=function(e){
                // box元素随着光标移动
                // 获取光标的坐标，将坐标值赋值给box元素的left和top
                e=e || window.event
                console.log(e)
                var x=e.clientX
                var y=e.clientY
                box.style.left=x-50+'px'
                box.style.top=y-50+'px'
            }
        }
        // 鼠标没有点击的时候，清除鼠标移动事件
        // 先建立鼠标抬起事件
        window.onmouseup=function(){
            window.onmousemove=null
        }
       
    </script>
</body>
</html>